<template>
  <span>
    <el-tooltip content="表情" placement="top" :enterable="false">
      <i class="iconfont icon-emoji chat-tool-btn" @click="onClick" />
    </el-tooltip>
    <transition name="el-zoom-in-top">
      <div :style="emojiBodyStyle" class="emoji-body">
        <img
          v-for="i in 165"
          :key="i"
          src="/lib/imgs/blank.gif"
          :style="getEmojiClass(i)"
          class="emoji-img"
          @click="addEmoji(i)"
        />
      </div>
    </transition>
  </span>
</template>

<script>
export default {
  model: {
    methods: ["selected"],
  },
  data() {
    return {
      visible: false,
      x: 0,
      y: 0,
    };
  },
  computed: {
    emojiBodyStyle() {
      if (this.visible) {
        return {
          display: "",
          left:this.x+'px',
          top:this.y+'px',
        };
      } else {
        return {
          display: "none"
        }
        
      }
    },
  },
  methods: {
    getEmojiClass(i) {
      return (
        "background:url(./lib/imgs/emoji.png) no-repeat 0px " + i * -24 + "px;"
      );
    },
    addEmoji(i) {
      const html = `<img src="/lib/imgs/blank.gif" alt='表情' style="background: url('./lib/imgs/emoji.png') 0px ${i *
        -24}px no-repeat;width:24px;height:24px;">`;
      this.$emit("selected", html);
    },
    onClick(e) {
      const width = document.documentElement.clientWidth
      this.visible = !this.visible
      this.x = 10
      this.y = e.clientY-200
    },
  },
  mounted() {
    const self = this;
    document.addEventListener("click", function(e) {
      if (
        !(e.target.className == "el-tooltip iconfont icon-emoji chat-tool-btn" || e.target.className == 'emoji-img')
      ) {
        self.visible = false;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.emoji-body {
  padding: 5px 10px;
  height: 200px;
  max-height: 200px;
  width: 330px;
  max-width: 330px;
  position: absolute;
  z-index: 99999;
  background-color: #fff;
  border: #aaa solid 1px;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
}
.emoji-img {
  width: 24px;
  height: 24px;
  margin: 5px;
}
.chat-tool-btn {
  cursor: pointer;
  margin-right: 10px;
}
</style>
